<template>
	<div id="">
		<div id="" v-if="iff">
			<van-skeleton title :row="3" />
		</div>
		<div id="" v-else>
			<div class="bigbox">
				<div class="main_small" v-for="(item,index) in list" :key="index">
					<div @click="skip(item.id,item.name)">
						<i :class="item.icon"></i>&nbsp;{{item.name}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				iff: true,
				list: [{
						id: '1',
						name: 'Mac',
						icon: 'el-icon-monitor'
					},
					{
						id: '2',
						name: 'iPad',
						icon: 'el-icon-mobile'
					},
					{
						id: '3',
						name: 'iPhone',
						icon: 'el-icon-mobile-phone'
					},
					{
						id: '4',
						name: 'Watch',
						icon: 'el-icon-watch'
					},
					{
						id: '5',
						name: 'Music',
						icon: 'el-icon-service'
					},
					{
						id: '6',
						name: '配件',
						icon: 'el-icon-ice-cream-square'
					}
				]
			}
		},
		mounted() {
			setTimeout(function() {
				this.iff = false
			}.bind(this), 1000)
		},
		methods: {
			skip(id, name) {
				this.$router.push({
					path: '/nav-fl',
					query: {
						id: id,
						name: name
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.bigbox {
		display: flex;
		flex-wrap: wrap;
		margin-left: 2%;
	}

	.main_small {
		background-color: white;
		width: 30%;
		margin-left: 2%;
		margin-top: 1.5vh;
		border-radius: 5px;
		height: 8vh;
		line-height: 8vh;
		font-size: 0.35rem;
		box-shadow: 2px 2px 2px 2px #f1f1f1;
		border-radius: 10px;
		margin-top: 1vh;
	}
</style>
